<template>
  <el-dialog
    :title="showTitle"
    width="50%"
    :visible="showDialog"
    @close="brnCancel"
  >
    <el-form
      ref="roleForm"
      :model="roleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 角色名称 -->
      <el-form-item label="角色名称" prop="name">
        <el-input v-model.trim="roleForm.name" />
      </el-form-item>

      <!-- 角色描述 -->
      <el-form-item label="角色描述" prop="description">
        <el-input v-model.trim="roleForm.description" />
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" @click="btnOK">确 定</el-button>
        <el-button @click="brnCancel">取 消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addRole, getRoleList, editRole } from '@/api/setting'

export default {
  name: 'AddRole',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },

    page: {
      type: Object,
      default: null
    }
  },

  data() {
    const chexkRoleRepeat = async(rule, value, callback) => {
      const { rows } = await getRoleList({
        page: this.page,
        pagesize: this.page.total
      })
      let isRepeat = false
      if (this.roleForm.id) {
        // 编辑
        isRepeat = rows.some(
          (item) => item.id !== this.roleForm.id && item.name === value
        )
      } else {
        // 新增
        isRepeat = rows.some((item) => item.name === value)
      }
      isRepeat ? callback(new Error(`${value}角色已存在`)) : callback()
    }
    return {
      roleForm: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          {
            required: true,
            message: '角色描述必须在1-10个字符串之间',
            trigger: 'blur',
            min: 1,
            max: 10
          },
          { validator: chexkRoleRepeat, trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          {
            required: true,
            message: '角色描述必须在1-10个字符串之间',
            trigger: 'blur',
            min: 1,
            max: 10
          }
        ]
      }
    }
  },

  computed: {
    showTitle() {
      return this.roleForm.id ? '编辑角色' : '新增角色'
    }
  },

  methods: {
    // 点击确定
    async btnOK() {
      try {
        let text = '新增'
        await this.$refs.roleForm.validate()
        // 校验通过
        if (this.roleForm.id) {
          // 编辑
          text = '编辑'
          await editRole(this.roleForm)
        } else {
          await addRole(this.roleForm)
        }
        this.$parent.getRoleList()
        this.$emit('update:showDialog', false)
        this.$message.success(`${text}角色成功！`)
      } catch (error) {
        console.log(error)
      }
    },

    // 点击取消
    async brnCancel() {
      this.$emit('update:showDialog', false)
      await new Promise(resolve => setTimeout(() => resolve(), 500))

      this.roleForm = {
        name: '',
        description: ''
      }

      // 清除校验
      this.$refs.roleForm.resetFields()
    }
  }
}
</script>

<style>
</style>
